<template>
  <div class="details">
    <el-row type="flex"
            justify="space-between"
            class="nav">
      <el-col :span="20">
        <div class="titles">构件详情</div>
      </el-col>
      <el-col :span="4">
        <div class="float-right">
          <el-button type="primary"
                     @click="goedit"
                     v-if="btnType=='1'?false:true">编辑构件</el-button>
        </div>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName"
             type="border-card">
      <el-tab-pane label="基本信息"
                   name="first"
                   class="information">
        <el-row type="flex"
                justify="space-between"
                class="nav">
          <el-col :span="12">
            <div class="text">
              <div class="caption">构件编号</div>{{ information.cp_num }}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="text">
              <div class="caption">构件类型</div>{{ information.component_name }}
            </div>
          </el-col>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                class="nav">
          <el-col :span="12">
            <div class="text">
              <div class="caption">所属状态</div>{{ information.status==='1'?'正常':'删除' }}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="text">
              <div class="caption">所在项目</div>{{ information.project_name }}
            </div>
          </el-col>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                class="nav">
          <el-col :span="12">
            <div class="text">
              <div class="caption">项目地址</div>{{ information.address }}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="text">
              <div class="caption">所在公司</div>{{ information.company }}
            </div>
          </el-col>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                class="nav">
          <el-col :span="24">
            <div class="text">
              <div class="caption">项目经理</div>{{ information.proUser }}
            </div>
          </el-col>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                class="nav">
          <el-col :span="12">
            <div class="text">
              <div class="caption">检测体系</div>{{ information.check }}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="text">
              <div class="caption">录入时间</div>{{ information.created_at }}
            </div>
          </el-col>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                class="nav">
          <el-col :span="12">
            <div class="text">
              <div class="caption">传感器</div>{{ information.sensor }}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="text">
              <div class="caption">ID芯片</div>{{ information.rfid_num }}
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="设计信息"
                   name="second"
                   class="design">
        <div class="common ">
          <p class="titles"
             style="line-height:34px">构件二维码</p>
          <div id="qrcode"
               ref="qrcode"></div>
          <!-- <img :src="code"/> -->
          <el-button type="success"
                     size="small"
                     @click="savePic"
                     style="margin-top:10px">下载二维码</el-button>
        </div>
        <!-- <div class="common clearfix"
             v-for="(item,index) in design"
             :key="index">
          <p class="titles">{{ item.name }}</p>
          <el-row class="nav">
            <el-col :span="24">
              <el-col :span="12"
                      v-for="(list,i) in item.value"
                      :key="i">
                <div class="text"
                     style="padding-left:220px">
                  <div class="caption">{{ list.name }}</div>{{ list.value }}
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div> -->
        <div class="common">
          <p class="titles">设计详情</p>
          <el-row :gutter="20">
            <el-col :span="4"
                    v-for="(item, index) in designImg"
                    :key="index">
              <img :src="item"
                   class="img-style">
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="24">
            <memberInfo></memberInfo>
          </el-col>
        </el-row>
        <!-- <div class="common clearfix"
             v-for="(item,index) in designHy"
             :key="index">
          <p class="titles">{{ item.name }}</p>
          <el-row class="nav"
                  v-if="item.is_vertical==1">
            <el-col :span="24">
              <el-col :span="3"
                      v-for="(list,i) in item.value"
                      :key="i"
                      style="text-align: center">
                <p class="vertical-title">{{list.name}}</p>
                <div v-for="(details,i) in list.value"
                     :key="i"
                     class="vertical-details">{{details}}</div>
              </el-col>
            </el-col>
          </el-row>
          <el-row class="nav"
                  v-else>
            <el-col :span="24">
              <el-col :span="12"
                      v-for="(list,i) in item.value"
                      :key="i">
                <div class="text"
                     id="nav-style">
                  <div class="caption">{{ list.name }}</div>{{ list.value }}
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div> -->
      </el-tab-pane>
      <el-tab-pane label="制作信息"
                   name="third"
                   class="production">
        <el-row type="flex"
                justify="space-between"
                class="nav">
          <el-col :span="24">
            <div class="text">
              <div class="caption">加工工厂</div>{{ information.name }}
            </div>
          </el-col>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                class="nav">
          <el-col :span="12">
            <div class="text">
              <div class="caption">生产负责人</div>{{ information.proUser }}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="text">
              <div class="caption">生产时间</div>{{ information.make_date }}
            </div>
          </el-col>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                class="nav">
          <el-col :span="12">
            <div class="text">
              <div class="caption">入库时间</div>{{ information.in_user_date }}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="text">
              <div class="caption">工厂堆放位置</div>{{ information.lon }}{{information.lat}}
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="运输信息"
                   name="fourth"
                   class="transport">
        <el-row type="flex"
                justify="space-between"
                class="nav">
          <el-col :span="12">
            <div class="text">
              <div class="caption">出库时间</div>{{ information.out_date }}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="text">
              <div class="caption">运输车辆</div>{{ information.car_num }}
            </div>
          </el-col>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                class="nav">
          <el-col :span="12">
            <div class="text">
              <div class="caption">到场时间</div>{{ information.scene_date }}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="text">
              <div class="caption">现场堆放位置</div>{{ information.name }}
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="安装信息"
                   name="fifth"
                   class="setup">
        <el-row type="flex"
                justify="space-between"
                class="nav">
          <el-col :span="12">
            <div class="text">
              <div class="caption">吊装负责人</div>{{ information.user_name }}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="text">
              <div class="caption">现场堆放位置</div>{{ information.name }}
            </div>
          </el-col>
        </el-row>
        <el-row type="flex"
                justify="space-between"
                class="nav">
          <el-col :span="12">
            <div class="text">
              <div class="caption">安装开始时间</div>{{ information.start_install_date }}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="text">
              <div class="caption">安装完成时间</div>{{ information.end_install_date }}
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import { componentListApi } from '@/services/ProjectCenter'
import { standardCodeApi } from '@/services/StandardCode'
import memberInfo from '../../ProjectCenter/components/memberInfo'
import QRCode from 'qrcodejs2'
export default {
  components: {
    memberInfo
  },
  data () {
    return {
      activeName: 'first',
      btnType: "",
      information: {
        cp_num: '',
        typeName: '',
        stage: '',
        project_name: '',
        cp_type: "",
        component_name: "",
        address: '',
        company: '',
        proUser: '',
        check: '',
        created_at: '',
        sensor: '',
        rfid_num: '',
        make_date: "",
        start_install_date: "",
        end_install_date: "",
        name: "",
        out_date: "",
        scene_date: "",
        in_user_date: "",
        lat: "",
        lon: "",
        car_num: ""
      },
      designImg: [],
      designCode: '',
      design: [],
      designHy: [],
      production: {
        fac_name: '',
        productName: '',
        createTime: '',
        in_user_date: '',
        place: '',
      },
      transport: {
        delTime: '',
        carNum: '',
        preTime: '',
        postion: ''
      },
      setup: {
        lifting: '',
        place: '',
        startTime: '',
        endTime: '',
      },
      code: '',
      id: '',
      memberType: [],
      project_id: "",
    }
  },
  methods: {
    //基本信息
    getInformation () {
      componentListApi.getBaseInfo({
        params: {
          id: this.id
        }
      }).then((res) => {
        console.log('info', res)
        this.project_id = res.data.project_id
        this.information.cp_num = res.data.cp_num;
        this.information.typeName = res.data.type_name;
        this.information.stage = res.data.stage_name;
        this.information.project_name = res.data.project.project_name;
        this.information.address = res.data.project.address;
        this.information.company = res.data.company_name;
        this.information.proUser = res.data.project_user.user_name;
        this.information.check = res.data.check_system;
        this.information.created_at = res.data.created_at;
        this.information.sensor = res.data.sen_num;
        this.information.rfid_num = res.data.rfid_num;
        this.information.cp_type = res.data.cp_type
        this.information.make_date = res.data.make_date
        this.information.start_install_date = res.data.start_install_date
        this.information.end_install_date = res.data.end_install_date
        this.information.car_num = res.data.car.car_num
        this.information.out_date = res.data.out_date
        this.information.scene_date = res.data.scene_date
        this.information.in_user_date = res.data.in_user_date
        this.designImg = [res.data.img1, res.data.img2, res.data.img3]
        this.information.name = res.data.pro_point.name
        this.information.lon = res.data.factory_point.lon
        this.information.lat = res.data.factory_point.lat
        for (var j = 0; j < this.memberType.length; j++) {
          if (this.information.cp_type === this.memberType[j].value) {
            this.information.component_name = this.memberType[j].name
          }
        }
      }).catch((error) => {
        console.log(error);
      });
    },
    //制作信息
    getProduction () {
      // componentListApi.getMakeInfo({
      //   params: {
      //     id: this.id
      //   }
      // }).then((res) => {
      //   this.production.fac_name = res.data.fac_name;
      //   this.production.productName = res.data.product_leader_name;
      //   this.production.createTime = res.data.createtime;
      //   this.production.storageTime = res.data.sto_time;
      //   this.production.place = res.data.place;
      // }).catch((error) => {
      //   console.log(error)
      // })

    },
    //运输信息
    getTransport () {
      // componentListApi.getTransInfo({
      //   params: {
      //     id: this.id
      //   }
      // }).then((res) => {
      //   this.transport.delTime = res.data.del_time;
      //   this.transport.carNum = res.data.car_num;
      //   this.transport.preTime = res.data.pre_time;
      //   this.transport.postion = res.data.p_position;
      // }).catch((error) => {
      //   console.log(error)
      // })
    },
    //安装信息
    getSetup () {
      // componentListApi.getInstallInfo({
      //   parmas: {
      //     id: this.id
      //   }
      // }).then((res) => {
      //   this.setup.lifting = res.data.mount_leader_name;
      //   this.setup.place = res.data.place;
      //   this.setup.startTime = res.data.starttime;
      //   this.setup.endTime = res.data.endtime;
      // }).catch((error) => {
      //   console.log(error)
      // })
    },
    //设计信息
    getDesign () {
      this.$nextTick(function () {
        this.qrcode();
      })
    },
    //获取构件类型
    getMemberType () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'component_type'
        }
      }).then(res => {
        this.memberType = res.data.list
      })
    },
    //获取构件状态
    getStatus () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'component_status'
        }
      }).then(res => {
      })

    },
    qrcode () {
      let qrcode = new QRCode('qrcode', {
        width: 100,
        height: 100, // 高度
        text: process.env.JUMP_TO_BIND_PAGE + 'memberQrCode?id=' + this.$route.query.id, // 二维码地址 
      })
    },
    //保存图片
    savePic () {
      //找到canvas标签
      let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');
      //创建一个a标签节点
      let a = document.createElement("a")
      //设置a标签的href属性（将canvas变成png图片）
      a.href = myCanvas[0].toDataURL('image/jpg').replace('image/jpg', 'image/octet-stream')
      //设置下载文件的名字
      a.download = "二维码"
      //点击
      a.click()
      //弹出提示
      this.$message({ message: '正在进行下载保存', type: 'warning' })

    },
    goedit () {
      //this.$router.push({ path: '/edit', query: { id: this.id } })
      this.$router.push({
        path: '/edit', query: { id: this.$route.query.id, project_id: this.project_id }
      })
    },

  },
  created () {
    this.id = this.$route.query.id
    this.btnType = this.$route.query.type
    this.getMemberType()
    this.getStatus()
  },
  mounted () {
    this.getInformation();
    this.getProduction();
    this.getTransport();
    this.getSetup();
    this.getDesign();
  }
}
</script>
<style lang="scss" scoped>
#nav-style {
  padding-left: 220px;
}
.img-style {
  width: 100%;
  height: 100%;
  border: 1px solid #d9d9d9;
  padding: 2px;
}
.float-right {
  text-align: right;
}
body {
  overflow: visible !important;
}
.details {
  padding: 0 20px;
  .nav {
    margin: 20px 0;
    .titles {
      font-size: 18px;
      color: #1441b3;
      text-indent: 2px;
      line-height: 40px;
    }
  }
  .information {
    padding: 0 20px;
  }
  .design {
    padding: 0 20px;
    .common {
      /* border-bottom: 1px solid #E6E6E6; */
      /* padding:20px 0; */
      .titles {
        color: #333333;
        font-size: 14px;
        font-weight: 400;
        text-indent: 10px;
      }
      .nav {
        padding-left: 10px;
        .vertical-title {
          color: #999999;
          font-size: 14px;
          line-height: 40px;
        }
        .vertical-details {
          font-size: 14px;
          line-height: 40px;
          min-height: 40px;
        }
      }
    }
  }
  .production {
    padding: 0 20px;
  }
  .transport {
    padding: 0 20px;
  }
  .setup {
    padding: 0 20px;
  }
}
.caption {
  color: #999999;
  font-size: 14px;
  display: inline-block;
  padding-right: 40px;
  line-height: 40px;
  position: absolute;
  left: 0;
}
.text {
  font-size: 14px;
  position: relative;
  padding-left: 100px;
  line-height: 40px;
  height: 40px;
}
</style>